<template>
  <div>
    <navblack>详细信息</navblack>
    <form
      action
      enctype="multipart/form-data"
      @submit.prevent="submitForm($event)"
    >
      <div class="main">
        <div @click="selectTheme()">
          <span>主题</span>
          <!-- <input type="text" name="theme" placeholder="请发布服务主题" /> -->
          <div>
            {{ xrTheme }}
            <img
              :src="imageUrl.right1"
              alt
              srcset
              class="rightDFG"
              v-if="xrTheme == ''"
            />
          </div>
        </div>
        <div>
          <span>开始时间</span>
          <div @click="timeBtn(0)">
            {{ startTTheme }}
            <input
              readonly="readonly"
              name="start-time"
              placeholder="请输入开始时间"
              v-if="startTTheme == ''"
            />
          </div>
          <!-- <input
            type="text"
            name="start-time"
            onfocus="(this.type='datetime-local')"
            placeholder="请输入开始时间"
            v-model="start_time"
          /> -->
        </div>
        <div>
          <span>结束时间</span>
          <div @click="timeBtn(1)">
            {{ endTTheme }}
            <input
              readonly="readonly"
              v-if="endTTheme == ''"
              name="end-time"
              placeholder="请输入结束时间"
            />
          </div>
          <!-- <input
            type="text"
            name="end-time"
            onfocus="(this.type='datetime-local')"
            placeholder="请输入结束时间"
            v-model="end_time"
          /> -->
        </div>
        <div>
          <span>电话</span>
          <input
            type="tel"
            v-model="phone"
            name="tel"
            maxlength="11"
            placeholder="请输入电话"
          />
        </div>
        <div>
          <span>本人性别</span>
          <div class="select-sex">
            <input
              type="radio"
              checked
              value="1"
              v-model="sex"
              name="user-sex"
              id="user-male"
            />
            <label for="user-male"></label>男
            <input
              type="radio"
              value="2"
              v-model="sex"
              name="user-sex"
              id="user-female"
            />
            <label for="user-female"></label>女
          </div>
        </div>
        <div v-if="0">
          <span>需求性别</span>
          <div class="select-sex">
            <input
              type="radio"
              value="3"
              v-model="demandsex"
              name="need-sex"
              id="everything"
            />
            <label for="everything"></label>不限
            <input
              type="radio"
              value="1"
              v-model="demandsex"
              checked
              name="need-sex"
              id="need-male"
            />
            <label for="need-male"></label>男
            <input
              type="radio"
              value="2"
              v-model="demandsex"
              name="need-sex"
              id="need-female"
            />
            <label for="need-female"></label>女
          </div>
        </div>
        <div v-if="0">
          <span>需求人数</span>
          <input
            type="text"
            name="person-num"
            placeholder="请输入人数"
            readonly
            v-model="ydnum"
          />
        </div>
        <div @click="cityui()">
          <span>地址</span>
          <!-- <input type="text" name="address" placeholder="请输入地址" /> -->
          <div>
            {{ posDZ.posDZ_sA }} {{ posDZ.posDZ_sB }} {{ posDZ.posDZ_sC }}
            <img
              :src="imageUrl.right1"
              alt
              srcset
              class="rightDFG"
              v-if="posDZ.posDZ_sA == ''"
            />
          </div>
        </div>
        <div>
          <span>门牌号</span>
          <input
            type="text"
            v-model="site"
            name="address"
            placeholder="详细地址，例：16号楼5层201室"
          />
        </div>

        <div>
          <span>保证金</span>
          <div class="ensure-rule">
            <span>{{ task_money }}元</span>
            <span>收取20%手续费</span>
          </div>
        </div>
        <div>
          <span>所需邀约次数</span>
          <span>{{ ydnum ? ydnum : 0 }}次</span>
        </div>
        <div id="upfile">
          <span>上传照片</span>
          <!-- <input
            type="file"
            id="upimage"
            name="imageSrc"
            accept="image/png, image/jpeg, image/gif, image/jpg"
          />
          <label class="up-image" for="upimage">{{ 0 ? "" : "+" }}</label>-->
          <input
            type="file"
            id="upimage"
            name="imageSrc"
            accept="image/png, image/jpeg, image/gif, image/jpg"
            @change="uploadPhoto($event)"
          />
          <label class="up-image" for="upimage">
            {{ file == '' ? '+' : '' }}
            <img v-if="file" :src="$photo + file" id="img-upload" alt />
          </label>
        </div>
        <div id="remarks">
          <span>备注需求</span>
          <textarea
            name="remarks"
            id
            cols="100%"
            v-model="content"
            rows
          ></textarea>
        </div>
        <div class="confirm" @click="jumpoui()">
          <button type="submit" class="btn-release">确认邀约</button>
        </div>
      </div>
    </form>
    <!--城市  -->
    <awesome-picker
      ref="picker-city"
      :data="pickerCity.data"
      :anchor="pickerCity.anchor"
      :textTitle="pickerCity.textTitle"
      @confirm="handlePickerConfirmCity"
    ></awesome-picker>
    <!-- 邀约次数弹窗 -->
    <div class="kuangYe" v-if="kuangYenum" @click="kuangYenum = !kuangYenum">
      <div class="cont" @click.stop>
        <div>邀约次数</div>
        <div>
          您的邀约次数为{{
            numberOf
          }}次，未满足所需邀约需求，请前往个人中心购买~
        </div>
        <div @click="payMyu()">前往购买</div>
      </div>
    </div>
    <!-- 余额弹窗 -->
    <div class="yetc" v-if="yetcD" @click="yetcD = !yetcD">
      <div class="cont" @click.stop>
        <div>余额</div>
        <div><img :src="imgurl8" alt srcset />{{ task_money }}元</div>
        <div>本次下单你需要支付{{ task_money }}的余额。</div>
        <div @click="tankuang('quxiao')">确认</div>
      </div>
    </div>
    <!-- 主题 -->
    <awesome-picker
      ref="picker-theme"
      :data="pickerEdu.data"
      :anchor="pickerEdu.anchor"
      :textTitle="pickerEdu.textTitle"
      @confirm="handlePickerConfirmEdu"
    ></awesome-picker>
    <!-- 开始时间 -->
    <van-popup v-model="startTime" position="bottom">
      <van-datetime-picker
        @confirm="startTimes"
        @cancel="startTimes"
        v-model="currentDate"
        type="datetime"
      />
    </van-popup>
    <!-- 结束时间按 -->
    <van-popup v-model="endTime" position="bottom">
      <van-datetime-picker
        @confirm="endTimes"
        @cancel="endTimes"
        v-model="currentDate"
        type="datetime"
      />
    </van-popup>
  </div>
</template>

<script>
// import navBlack from '@/components/nav-black'
const navBlack = () => import('@/components/nav-black')

export default {
  data() {
    return {
      date_time: null,
      imageUrl: {
        right1: require('../../../static/images/task/rightpng.png')
      },
      // 城市数据
      pickerCity: {
        data: this.$areaData,
        anchor: [],
        textTitle: '请选择城市'
      },
      ydnum: 1,
      kuangYenum: false,
      yetcD: false,
      imgurl8: require('../../../static/images/fz/qianjjj.png'),
      // 主题
      pickerEdu: {
        data: [['旅游', '吃饭', '轰趴', '约会', '看电影']],
        anchor: [],
        textTitle: '请选择主题'
      },
      xrTheme: '',
      posDZ: {
        posDZ_sA: '',
        posDZ_sB: '',
        posDZ_sC: ''
      },
      file: '',
      phone: '',
      //城市id
      city_A: '',
      city_B: '',
      city_C: '',
      site: '',
      file: '',
      content: '',
      demandsex: 3,
      sex: 1,
      numbarOf: 0,
      task_money: null,
      start_time: '',
      end_time: '',
      currentDate: new Date(),
      startTime: false,
      startTTheme: '',
      endTime: false,
      endTTheme: ''
    }
  },
  methods: {
    timeBtn(index) {
      index == 0 ? (this.startTime = true) : (this.endTime = true)
    },
    startTimes() {
      this.start_time = this.$tools.formatDateTime(new Date(this.currentDate))
      this.startTTheme = this.start_time
      this.startTime = false
    },
    endTimes() {
      this.end_time = this.$tools.formatDateTime(new Date(this.currentDate))
      this.endTTheme = this.end_time
      this.endTime = false
    },
    submitForm(e) {
      console.log(e)
    },
    cityui() {
      this.$refs['picker-city'].show()
    },
    handlePickerConfirmCity(resaults) {
      // console.log(resaults)
      this.posDZ.posDZ_sA = resaults[0].value
      this.posDZ.posDZ_sB = resaults[1].value
      this.posDZ.posDZ_sC = resaults[2].value
      this.city_A = this.$areaData[resaults[0].index].id
      this.city_B = this.$areaData[resaults[0].index].children[
        resaults[1].index
      ].id
      this.city_C = this.$areaData[resaults[0].index].children[
        resaults[1].index
      ].children[resaults[2].index].id
    },
    jumpoui() {
      // this.$jump('/lssuedInvitation')
      if (this.theme_id == 0) {
        alert('请选择主题')
        return false
      }
      if (this.start_time == '') {
        alert('请输入开始时间')
        return false
      }
      if (this.end_time == '') {
        alert('请输入结束时间')
        return false
      }
      if (
        this.$tools.getUnixTime(this.end_time) <
        Date.parse(new Date()) / 1000
      ) {
        alert('结束时间必须大于当前时间')
        return false
      }
      if (this.end_time < this.start_time) {
        alert('结束时间必须大于开始时间')
        return false
      }
      if (this.phone == '') {
        alert('请输入电话号码')
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        alert('请输入正确的电话号码')
        return false
      }
      if (this.ydnum == '') {
        alert('请输入需求人数')
        return false
      }
      if (this.ydnum < 1) {
        alert('需求人数最少为1人')
        return false
      }
      if (!/^[1-9]|[1-9][0-9]*$/.test(this.ydnum)) {
        alert('请输入正确的需求人数')
        return false
      }
      if (this.ydnum > 10) {
        alert('需求人数最多为10人')
        return false
      }

      if (
        this.posDZ.posDZ_sA == '' ||
        this.posDZ.posDZ_sB == '' ||
        this.posDZ.posDZ_sC == ''
      ) {
        alert('请选择地址')
        return false
      }
      if (this.site == '') {
        alert('请填写门牌号')
        return false
      }
      if (this.file == '') {
        alert('请添加图片')
        return false
      }
      if (this.content == '') {
        alert('请输入备注')
        return false
      }
      this.ydnum === 0 ? (this.kuangYenum = true) : (this.yetcD = !this.yetcD)
    },
    // 前往购买
    payMyu() {
      this.kuangYenum = false
      this.$jump('/personal')
    },
    tankuang(sta) {
      this.$axios({
        method: 'post',
        url: 'NeedLoginAction/addTask',
        data: {
          token: sessionStorage.token,
          theme: this.theme_id,
          addtime: this.start_time,
          exittime: this.end_time,
          phone: this.phone,
          sex: this.sex,
          demandsex: this.demandsex,
          content: this.content,
          site:
            this.posDZ.posDZ_sA +
            ' ' +
            this.posDZ.posDZ_sB +
            ' ' +
            this.posDZ.posDZ_sC,
          detailed_address: this.site,
          demand_people: this.ydnum,
          type: 1,
          province_id: this.city_A,
          city_id: this.city_B,
          district_id: this.city_C,
          private: 0,
          img_id: this.file,
          yid: this.$route.query.uid
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$jump('/lssuedInvitation')
          } else {
            if (res.data.code == -1) {
              alert(res.data.msg)
              // this.numberOf = res.data.data
              // this.kuangYenum = !this.kuangYenum
              // this.yetcD = !this.yetcD
            } else {
              alert(res.data.msg)
            }
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
    },
    selectTheme() {
      this.$refs['picker-theme'].show()
    },
    // 主题
    handlePickerConfirmEdu(resault) {
      // console.log(resault)
      this.xrTheme = resault[0].value
      this.theme_id = this.pickerEdu.data[resault[0].index].id
    },
    uploadPhoto(event) {
      let file = event.target.files[0]
      let param = new FormData()
      param.append('image', file)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      this.$axios
        .post('Flink/uploads', param, config)
        .then(response => {
          if (response.data.code === 200) {
            let url = response.data.data
            this.file = url
          } else {
            alert(response.data.msg)
          }
        })
        .catch(err => {
          alert(err)
        })
    }
  },
  components: {
    navblack: navBlack
  },
  created() {
    this.task_money = sessionStorage.task_money
    this.$axios({
      method: 'post',
      url: 'NeedLoginAction/getTaskDetails',
      data: {
        token: sessionStorage.token
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.pickerEdu.data = res.data.data.theme
        } else {
          alert(res.data.msg)
        }
      })
      .catch(error => {
        alert('网络错误，请刷新后重试~')
      })
  }
}
</script>

<style lang="scss" scoped>
/deep/.van-picker__cancel {
  color: #999;
}
/deep/.van-picker__confirm {
  color: #42b983;
}
/deep/.van-overlay {
  background-color: rgba(0, 0, 0, 0.28) !important;
}
.yetc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & > .cont {
    width: 7.827rem;
    height: 5.88rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    & > div:nth-child(1) {
      font-family: PingFang-SC-Regular;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
    & > div:nth-child(2) {
      font-family: PingFang-SC-Regular;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #323232;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > img {
        margin-right: 0.24rem;
        width: 0.64rem;
        height: 0.773rem;
      }
    }
    & > div:nth-child(3) {
      width: 5.12rem;
      font-family: PingFang-SC-Regular;
      font-size: 0.407rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
      text-align: center;
    }
    & > div:nth-child(4) {
      width: 6.627rem;
      height: 1rem;
      background-color: #323232;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-family: PingFang-SC-Regular;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
}
.kuangYe {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.kuangYe > .cont {
  width: 7.826667rem;
  height: 5.88rem;
  background-color: #ffffff;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.kuangYe > .cont > div:nth-child(1) {
  text-align: center;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #303030;
}
.kuangYe > .cont > div:nth-child(2) {
  text-align: center;
  font-size: 0.413333rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #888888;
  line-height: 0.756rem;
}
.kuangYe > .cont > div:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #303030;
  font-size: 0.44rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  width: 6.626667rem;
  height: 1rem;
  background-color: #323232;
  border-radius: 0.506667rem;
}
.rightDFG {
  margin-left: 0.12rem;
  width: 0.32rem;
  height: 0.32rem;
}
.main {
  width: 100%;
  margin-top: 0.933rem;
}
.main > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 0.8rem;
  padding: 0.35rem 0.3rem;
  margin: 0 auto;
  font-size: 0.4rem;
  border-bottom: 1px solid #dedede;
}
.main > div > span {
  color: #303030;
}
.main > div input {
  text-align: right;
  color: #888;
  border: none;
  background: none;
}
.select-sex {
  color: #888;
}
input[type='radio'] {
  width: 0;
  opacity: 0;
}
input[type='radio'] + label::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0.466rem;
  height: 0.466rem;
  margin: 0.35em;
  border-radius: 0.1rem;
  border: 2px solid #a1a1a1;
}
input[type='radio']:checked + label::before {
  content: '✔';
  text-align: center;
  line-height: 0.45rem;
  color: #323232;
  border: 2px solid #323232;
  background-clip: content-box;
}
.ensure-rule {
  display: flex;
  flex-direction: column;
  text-align: right;
  color: #323232;
}
#upfile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: normal;
  height: 4rem;
}
input[type='file'] {
  width: 0;
  opacity: 0;
}
.up-image {
  width: 2.24rem;
  height: 2.24rem;
  text-align: center;
  line-height: 2.24rem;
  font-size: 2rem;
  color: #fff;
  border-radius: 0.133rem;
  background-color: #e0e0e0;

  img {
    width: 100%;
    height: 100%;
  }
}
#remarks {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: flex-start;
  height: 4rem;
}
#remarks > textarea {
  height: 100%;
  margin: 0.4rem 0;
  padding: 0.3rem;
  box-sizing: border-box;
  border-radius: 0.133333rem;
  background-color: #e0e0e0;
  resize: none;
}
.confirm {
  width: 100% !important;
  padding: 0.333rem 0 !important;
  box-shadow: 0 -1px 5px #e0e0e0;
}
.btn-release {
  width: 80%;
  height: 0.8rem;
  margin: 0 auto;
  font-size: 0.44rem;
  color: #fff;
  border-radius: 0.4rem;
  background-color: #323232;
  border: #323232;
}
</style>
